import { getDetailApi, type DetailData } from "@/api/detail"
import { useEffect, useState } from "react"
import { useNavigate, useSearchParams } from "react-router-dom"
import { NavBar } from "antd-mobile"
import Author from "@/components/Author/index"

const Detail = () => {
  const [params] = useSearchParams()
  const id = params.get('id')
  const [detail, setDetail] = useState<DetailData | null>(null)
  const getDetail = async () => {
    try {
      const res = await getDetailApi(id!)
      setDetail(res.data.data)
    } catch (error) {
      console.log('error', error)
    }
  }
  useEffect(() => {
    getDetail()
  }, [id])

  const navigate = useNavigate()
  const back = () => {
    navigate(-1)
  }

  if (!detail) {
    return <div>this is loading...</div>
  }
  return (
    <div>
      <NavBar onBack={back}>文章详情</NavBar>
      <h3>{detail?.title}</h3>
      <Author autPhoto={detail?.aut_photo} autName={detail?.aut_name} isFollowed={detail?.is_followed}></Author>
      <p>发布时间：{detail?.pubdate}</p>
      <p dangerouslySetInnerHTML={{__html: detail?.content}}></p>
    </div>
  )
}
export default Detail